<template>
	<view class="team-item" :class="[dataItem.awardMoney ? 'border-b':'']">
		<view class="flex flex-align-center">
			<image v-if="dataItem.logo" style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="dataItem.logo" mode=""></image>
			<view v-if="dataItem.logo" class="flex flex-align-center flex-space-between flex-1 m-l-20">
				<text class="font32 ">{{ dataItem.name }}</text>
				<view class="flex flex-align-center font28" v-if="dataItem.teamNum">
					<text class="color-8E8E8E f-b">
						团队：
					</text>
					<text class="color-3FA897">
						{{ dataItem.teamNum }}人
					</text>
				</view>
			</view>
			
		</view>
		<view class="flex flex-space-between" :class="[dataItem.logo ? 'm-t-40':'']">
			<view class="flex flex-center flex-1 flex-column border-r">
				<text class="font32 color-F52200 f-b">{{ dataItem.total_commission }}</text>
				<view class="font24 color-8E8E8E m-t-20">
					{{ leftLable || '佣金(元)' }}
				</view>
			</view>
			<view class="flex flex-center flex-1 flex-column">
				<text v-if="dataItem.awardMoney" class="font32 color-F52200 f-b">{{ dataItem.awardMoney }}</text>
				<text v-if="dataItem.relevance" class="font32 color-b3 f-b">{{ dataItem.relevance }}</text>
				<view class="font24 color-8E8E8E m-t-20">
					<text v-if="rightLabel">
						{{ rightLabel }}
					</text> 
					<text v-else>{{ dataItem.relevance ? '与我关联(人)':'奖金' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		},
		leftLable: {
			type: String,
			default: ''
		},
		rightLabel: {
			type: String,
			default: ''
		}
	})
</script>

<style lang="scss" scoped>
	.border-r32 {
		border-radius: 32rpx;
	}
	.border-r {
		border-right: 2rpx solid #E5E5E5;
	}
	.border-b {
		border-bottom: 2rpx solid #E5E5E5;
	}
	.team-item {
		position: relative;
		z-index: 2;
		padding: 30rpx;
	}
</style>
